<script setup lang="ts">
import { computed, reactive, ref } from 'vue';
import { ProfileInfoResponseItem, ConvertControlPointToCurvePoint, ConvertCurvePointToControlPoint, VecPoint } from '../webApi';
import { useMouseInElement } from '@vueuse/core';
import CurvePointsHandler from "../components/CurvePointsHandler.vue";


import './VueDraggableResizable.css'
import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";


const props = defineProps<{ profile: ProfileInfoResponseItem }>();

const target = ref(null);
const mouse = reactive(useMouseInElement(target));
const RBP = computed(() => ({ X: mouse.elementWidth, Y: 0 }));
const LTP = computed(() => ({ X: 0, Y: mouse.elementHeight }));
function ccX(mp: VecPoint) {
    return ConvertCurvePointToControlPoint(RBP.value, LTP.value, mp).X;
}
function ccY(mp: VecPoint) {
    return ConvertCurvePointToControlPoint(RBP.value, LTP.value, mp).Y;
}
</script>

<template>
    <div style="width: 100%; height: 300px; background: #484848; border-radius: 5px; position: relative;" ref="target"
        class="curve-zone">
        <div style="width: 100%; height: 100%; overflow: hidden;">
            <div class="curve-handler" v-for="item, idx in props.profile.curvePoints" :key="idx"
                :style="{ left: item.PropsX + `%`, bottom: item.PropsY + `%` }">
            </div>

            <!-- <VueDraggableResizable :resizable="false" :w="20" :h="20" className="curve-handler" :parent="true" />

            <CurvePointsHandler v-for="item, idx in props.profile.curvePoints" :key="props.profile.SensorId + idx">
            </CurvePointsHandler> -->
        </div>
    </div>
    <pre lang="yaml">{{ mouse }}</pre>
    <pre lang="yaml">{{ {
        pp: ConvertControlPointToCurvePoint(RBP, LTP, { X: mouse.elementX, Y: mouse.elementY })
    } }}</pre>
</template>

<style scoped>
.curve-zone {
    user-select: none;
    -webkit-user-drag: none;
}

.curve-handler {
    position: absolute;
    cursor: grab;

    border-radius: 100px;
    width: 26px;
    height: 26px;

    transform: translate(-50%, 50%);
    background: rgba(208, 208, 208, 0.412);
}

.curve-handler:hover {
    width: 26px;
    height: 26px;

    background: rgb(179, 119, 119);
    cursor: grab;
}

.curve-handler:active {
    cursor: grabbing;
}
</style>